import React, { forwardRef, useImperativeHandle, useState } from 'react'
import { Modal } from 'antd'

const AddApi = forwardRef((props: any, ref: any) => {
	const [isModalOpen, setIsModalOpen] = useState(false)

	const handleOk = () => {
		setIsModalOpen(false)
	}

	const handleCancel = () => {
		setIsModalOpen(false)
	}

	// 暴露给父组件调用
	useImperativeHandle(ref, () => ({
		showModal() {
			setIsModalOpen(true)
		},
	}))

	return (
		<div className="add-api">
			<Modal
				title="Basic Modal"
				open={isModalOpen}
				onOk={handleOk}
				onCancel={handleCancel}>
				<p>Some contents...</p>
				<p>Some contents...</p>
				<p>Some contents...</p>
			</Modal>
		</div>
	)
})

export default AddApi
